<template>
    <mt-tabbar v-model="selected">
        <mt-tab-item 
            v-for="nav in navs"
            :key="nav.path"
            :id="nav.name">
            <i slot="icon" :class="nav.meta.icon" class="iconfont"></i>           
            {{nav.meta.navTitle}}
        </mt-tab-item>
  </mt-tabbar>
</template>

<script>
import '../assets/iconfont/iconfont.css'
import routes from '../router/routes'
export default {
    name:"tabbar",
    data(){
        return {
            navs:routes.filter(cur=>cur.meta.isNav),
            selected:""
        };
    },
    watch:{
        selected(newValue,oldValue){
            this.$router.push({name:newValue});
        }
    }
}
</script>
<style>
.iconfont{font-size: 28px;}

</style>


